<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS常用属性</title>

    <style>
      .block {
        background-color: red;
        width: 200px;
        height: 50px;
      }

      .inline {
        background-color: green;
        /* 行内元素是无法调节宽高的，尺寸由内容决定 */
      }
      .inline-block {
        background-color: blue;
        width: 200px;
        height: 100px;
      }

      .div-inline {
        background-color: aqua;
        /* display 的设置会影响显示效果 */
        display: inline;
      }

      .span-inline-block {
        display: inline-block;
        background-color: purple;
        height: 50px;
      }

      .span-block {
        display: block;
        background-color: tomato;
        height: 50;
      }
    </style>
  </head>
  <body>
    <h1 style="font: bolder 50px 'KaiTi'">这是一个 font 复合属性示例</h1>

    <p style="line-height: 40px">
      这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本
    </p>

    <div class="block">这是一个块级元素</div>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <img class="inline-block" src="logo.jpg" />
    <img class="inline-block" src="logo.jpg" />

    <h2>#display</h2>
    <div class="div-inline">这是一个转换成行内元素的 div 标签</div>
    <span class="span-inline-block">这是一个转换成行内块元素的 span 标签</span>
    <span class="span-block">这是一个转换成块元素的 span 标签</span>
  </body>
</html>
